<template>
  <div class="container">
    <!-- 分类+广告 -->
    <div class="home-entry">
      <!-- 左侧 -->
      <home-category-vue :menu-list="menuList" />
      <!-- 轮播图 -->
    </div>
  </div>
</template>

<script>
import { findBrand } from "@/api/home";

import { computed, reactive, ref } from "@vue/reactivity";
import { useStore } from "vuex";
import homeCategoryVue from "./components/home-category.vue";
export default {
  name: "HomePage",
  components: { homeCategoryVue},
  setup() {
    const store = useStore();
    const brand = reactive({
      id: "brand",
      name: "品牌",
      children: [{ id: "brand-children", name: "品牌推荐" }],
      brands: [],
    });
    // 获取品牌
    findBrand(6).then((res) => {
      brand.brands = res.result;
    });
    const menuList = computed(() => {
      // 得到9个分类，每个分类下的子分类只有两个
      const list = store.state.category.list.map((item) => {
        return {
          id: item.id,
          name: item.name,
          children: item?.children.slice(0, 2),
          goods: item?.goods,
        };
      });
      list.push(brand);
      return list;
    });

    return { menuList };
  },
};
</script>
<style lang="less" scoped></style>
